<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useAddProject, useUpdateProject } from '@fl/api/purchase'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { cloneDeep } from 'lodash-es'
import { computed, ref, toRefs } from 'vue'

const props = defineProps<{
    detail: any
}>()

const { detail } = toRefs(props)

const visible = defineModel<boolean>('visible', { required: true })

const initialState = {} as any
const state = ref<any>(cloneDeep(initialState))

const { isPending: isAddProjectPending, mutate: addProject } = useAddProject()

// #region Form
const formRef = ref()

const isSubmitLoading = computed(() => isAddProjectPending.value)

const columns: PlusColumn[] = [
    {
        fieldProps: {
            maxlength: 100,
            showWordLimit: true,
        },
        label: '项目名称',
        prop: 'projectName',
        valueType: 'copy',
    },
    {
        // fieldProps: {
        //     type: 'datetime',
        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
        // },
        label: '投标截止时间',
        prop: 'endTime',
        // valueType: 'date-picker',
    },
]

const rules = {
    endTime: [
        {
            message: '请选择截止时间',
            required: true,
            trigger: 'change',
        },
    ],
    projectName: [
        {
            message: '请输入项目名称',
            required: true,
            trigger: 'change',
        },
    ],
}

const { mutate } = useUpdateProject()
function doSave() {
    formRef.value.formInstance.validate((valid: boolean) => {
        if (valid) {
            const params = {
                ...state.value,
            }

            if (state.value?.id) {
                const { endTime, id, projectName } = state.value
                mutate({ endTime, id, projectName }, {
                    onSuccess() {
                        ElMessage.success('操作成功')
                        cancel()
                    },
                })
            }
            else {
                addProject(params, {
                    onSuccess() {
                        ElMessage.success('操作成功')
                        cancel()
                    },
                })
            }
        }
    })
}
// #endregion

function cancel() {
    visible.value = false
}

function closed() {
    state.value = cloneDeep(initialState)
    formRef.value?.formInstance?.resetFields()
}

function init() {
    if (detail.value?.id) {
        state.value = {
            ...detail.value,
        }
    }
}

function disabledDate(date: any) {
    return date < new Date()
}

watch(detail, (val: any) => {
    if (val) {
        init()
    }
}, { deep: true })
// #endregion
</script>

<template>
    <PlusDialog v-model="visible"
                :title="`${detail?.id ? '编辑' : '新建'}项目`"
                close-on-press-escape
                @cancel="cancel"
                @closed="closed"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
                  :row-props="{ gutter: 40 }"
                  label-position="top"
                  label-suffix=""
        >
            <template #plus-field-endTime>
                <el-date-picker v-model="state.endTime"
                                style="width: 100%;"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                :disabled-date="disabledDate"
                                type="datetime"
                                placeholder="请选择时间"
                />
            </template>
        </plusform>

        <template #footer>
            <div class="mx-auto">
                <SubmitBtn type="primary"
                           :loading="isSubmitLoading"
                           @click="doSave"
                >
                    保存
                </SubmitBtn>

                <el-button @click="cancel">
                    取消
                </el-button>
            </div>
        </template>
    </PlusDialog>
</template>
